<template>
  <div class="app-container">
    <!--搜索表单-->
    <el-form :inline="true" :model="searchAnnouncement" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input
          v-model="searchAnnouncement.title"
          placeholder="请输入公告标题"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="createTime"
          clearable
          value-format="yyyy-MM-dd"
          type="daterange"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 400px; margin-left: 20px"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>

    <br>
    <!--公告列表-->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="100"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="发布时间"
        width="200"
        align="center"
      >
        <template slot-scope="{row}">
          {{ row.createTime ? row.createTime.replace('T',' ') : '' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="Author"
        width="150"
        align="center"
      />
      <el-table-column
        label="发布状态"
        width="150"
        align="center"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.status === 1 ? 'success' : 'info'">
            {{ row.status === 1 ? '已发布' : '草稿' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="title"
        label="Title"
      />

      <el-table-column
        label="Actions"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row.id)">查看</el-button>
          <el-button type="warning" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--公告详情对话框-->
    <el-dialog title="公告详情" :visible.sync="dialogVisible" width="70%" top="5vh">
      <h2 class="detail-title">{{ currentAnnouncement.title }}</h2>
      <div class="detail-info">
        <span>作者: {{ currentAnnouncement.author }}</span>
        <span>发布时间: {{ currentAnnouncement.createTime ? currentAnnouncement.createTime.replace('T', ' ') : '' }}</span>
      </div>
      <div class="detail-content" v-html="currentAnnouncement.content" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!--分页工具条-->
    <el-pagination
      :background="background"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { page, deleteById, selectById } from '@/api/announcement.js'

export default {
  data() {
    return {
      background: true,
      // 每页显示的条数
      pageSize: 10,
      // 总记录数
      totalCount: 0,
      // 当前页码
      currentPage: 1,
      // 公告详情对话框是否展示
      dialogVisible: false,
      // 搜索模型数据
      searchAnnouncement: {
        title: ''
      },
      // 当前查看的公告
      currentAnnouncement: {},

      beginTime: '',
      endTime: '',
      createTime: '',

      // 表格数据
      tableData: []
    }
  },

  watch: {
    createTime(val) {
      if (val && val.length >= 2) {
        this.beginTime = val[0]
        this.endTime = val[1]
      } else {
        this.beginTime = ''
        this.endTime = ''
      }
    }
  },

  mounted() {
    this.page() // 当页面加载完成后，发送异步请求，获取数据
  },

  methods: {
    // 查询分页数据 - 只查询草稿状态的公告
    page() {
      page(
        this.searchAnnouncement.title,
        '0', // 固定查询草稿状态
        this.beginTime,
        this.endTime,
        this.currentPage,
        this.pageSize
      ).then((res) => {
        this.totalCount = res.data.data.total
        this.tableData = res.data.data.rows
      })
    },

    // 查询方法
    onSubmit() {
      this.currentPage = 1
      this.page()
    },

    clear() {
      this.searchAnnouncement = { title: '' }
      this.beginTime = ''
      this.endTime = ''
      this.createTime = ''
      this.page()
    },

    // 查看公告详情
    handleView(id) {
      selectById(id).then(res => {
        this.currentAnnouncement = res.data.data
        this.dialogVisible = true
      })
    },

    // 编辑公告
    handleEdit(id) {
      this.$router.push({ path: '/announcement/publish', query: { id: id }})
    },

    // 删除公告
    handleDelete(id) {
      this.$confirm('此操作将永久删除该草稿, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(res => {
          console.log(res.data)
          if (res.data.code === '1' || res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.page() // 重新加载数据
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val
      this.page()
    },

    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val
      this.page()
    }
  }
}
</script>

<style scoped>
.detail-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 22px;
  color: #303133;
}

.detail-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  color: #909399;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.detail-content {
    line-height: 1.6;
}
</style>
